<template>
  <div class="cardfolder">
    <div class="content-card" :v-model="item">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="title">{{item.name}}</span>
                <el-button style="float: right; padding: 3px 3px; font-size: 1.5rem" type="text" icon="el-icon-delete"></el-button>
                <el-button style="float: right; padding: 3px 3px; font-size: 1.5rem" type="text" icon="el-icon-star-off" v-if="collection"></el-button>
                <el-button style="float: right; padding: 2px -1px; font-size: 1.8rem" type="text" icon="el-icon-star-on" v-if="!collection"></el-button>
            </div>
            <div class="el-icon-user">
                {{item.member.length}}
            </div>
        </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardFolder',
  data() {
    return {
      list: []
    }
  },
  methods: {
    init(item) {
      this.list = item
      console.log(this.list)
    }
  }
}
</script>

<style scoped>
.cardfolder {
  width: 96%;
  position: relative;
  left: 1.5vw;
  display: inline-block;
}
/**======================== 收藏夹外部div样式 ==================================== */
.cardfolder .content-card {
  display: inline-block;
  width: 26%;
  height: 40%;
  margin-left: 3%;
  margin-top: 1%;
}
/**======================== 收藏夹el-card样式 ==================================== */
.cardfolder .box-card {
  width: 96%;
  height: 96%;
  /* margin-left: 5%; */
  margin-top: 3%;
  /* background-image: url(../../assets/folder.jpeg);
  background-size: 140%;
  background-repeat: no-repeat;
  background-position: 55% 60%; */
}
.cardfolder .box-card:hover {
  cursor: pointer;
  width: 98%;
  height: 98%;
}
/**======================== 收藏夹el-card 内部样式 ==================================== */
.cardfolder .box-card .clearfix .title{
  font: 24px '宋体';
}
</style>
